// 全局导航和UI交互功能

document.addEventListener('DOMContentLoaded', function() {
    // 侧边栏菜单
    const menuBtn = document.querySelector('.menu-btn');
    const sidebar = document.createElement('div');
    sidebar.classList.add('sidebar');
    sidebar.innerHTML = `
        <a href="index.html">首页</a>
        <a href="translation.html">翻译工具</a>
        <a href="map.html">地图导航</a>
        <a href="culture.html">文化知识</a>
        <a href="learning.html">学习中心</a>
        <a href="offline-content.html">离线内容</a>
        <a href="settings.html">设置</a>
    `;
    document.body.appendChild(sidebar);

    menuBtn.addEventListener('click', () => {
        sidebar.classList.toggle('show');
    });

    // 语言选择器
    const languageSelector = document.querySelector('.language-selector');
    const languageList = document.createElement('div');
    languageList.classList.add('language-list');
    languageList.innerHTML = `
        <div data-lang="zh">中文简体</div>
        <div data-lang="en">English</div>
        <div data-lang="ja">日本語</div>
        <div data-lang="ko">한국어</div>
        <div data-lang="fr">Français</div>
        <div data-lang="de">Deutsch</div>
    `;
    document.body.appendChild(languageList);

    languageSelector.addEventListener('click', () => {
        languageList.classList.toggle('show');
    });

    // 语言选择
    const languageOptions = document.querySelectorAll('.language-list div');
    languageOptions.forEach(option => {
        option.addEventListener('click', () => {
            const lang = option.dataset.lang;
            const langText = option.textContent;
            
            // 更新显示的语言
            const langSpan = languageSelector.querySelector('span');
            if (langSpan) {
                langSpan.textContent = langText;
            }
            
            // 关闭语言列表
            languageList.classList.remove('show');
            
            // 设置语言偏好
            setLanguagePreference(lang);
        });
    });

    // 点击页面其他地方关闭菜单和语言选择器
    document.addEventListener('click', (e) => {
        if (!menuBtn.contains(e.target) && !sidebar.contains(e.target)) {
            sidebar.classList.remove('show');
        }
        if (!languageSelector.contains(e.target) && !languageList.contains(e.target)) {
            languageList.classList.remove('show');
        }
    });

    // 添加动画效果
    const links = document.querySelectorAll('a, button');
    links.forEach(link => {
        link.addEventListener('click', (e) => {
            // 排除某些不需要动画的按钮
            if (link.classList.contains('no-animation')) return;
            
            link.style.transform = 'scale(0.95)';
            setTimeout(() => {
                link.style.transform = 'scale(1)';
            }, 200);
        });
    });
    
    // 检查网络状态
    window.addEventListener('online', updateNetworkStatus);
    window.addEventListener('offline', updateNetworkStatus);
    updateNetworkStatus();
    
    // 加载用户偏好设置
    loadUserPreferences();
});

// 更新网络状态
function updateNetworkStatus() {
    const isOnline = navigator.onLine;
    
    // 如果离线，显示提示
    if (!isOnline && !document.getElementById('offline-alert')) {
        const offlineAlert = document.createElement('div');
        offlineAlert.id = 'offline-alert';
        offlineAlert.className = 'offline-alert';
        offlineAlert.innerHTML = `
            <div class="offline-content">
                <img src="images/vector_25_450.svg" alt="离线模式" width="24" height="24">
                <span>您当前处于离线模式，部分功能可能受限</span>
                <button id="close-offline-alert">×</button>
            </div>
        `;
        document.body.appendChild(offlineAlert);
        
        // 关闭按钮
        document.getElementById('close-offline-alert').addEventListener('click', () => {
            offlineAlert.style.display = 'none';
        });
        
        // 自动隐藏
        setTimeout(() => {
            offlineAlert.style.opacity = '0';
            setTimeout(() => {
                if (offlineAlert.parentNode) {
                    offlineAlert.parentNode.removeChild(offlineAlert);
                }
            }, 500);
        }, 5000);
    } else if (isOnline && document.getElementById('offline-alert')) {
        const offlineAlert = document.getElementById('offline-alert');
        offlineAlert.style.opacity = '0';
        setTimeout(() => {
            if (offlineAlert.parentNode) {
                offlineAlert.parentNode.removeChild(offlineAlert);
            }
        }, 500);
    }
    
    // 如果离线，检查是否需要切换到离线模式
    if (!isOnline) {
        enableOfflineMode();
    }
}

// 启用离线模式
function enableOfflineMode() {
    // 检查当前页面
    const currentPath = window.location.pathname;
    const pageName = currentPath.split('/').pop();
    
    // 如果不是离线内容页面，显示提示
    if (pageName !== 'offline-content.html') {
        const offlineBanner = document.createElement('div');
        offlineBanner.className = 'offline-banner';
        offlineBanner.innerHTML = `
            <p>您当前处于离线模式。访问<a href="offline-content.html">离线内容</a>以使用已下载的功能。</p>
        `;
        
        // 插入到内容区域的顶部
        const content = document.querySelector('.content');
        if (content && !document.querySelector('.offline-banner')) {
            content.insertBefore(offlineBanner, content.firstChild);
        }
    }
    
    // 禁用需要网络的功能
    const onlineOnlyElements = document.querySelectorAll('.online-only');
    onlineOnlyElements.forEach(element => {
        element.classList.add('disabled');
        if (element.tagName === 'BUTTON' || element.tagName === 'INPUT') {
            element.disabled = true;
        }
        element.title = '此功能需要网络连接';
    });
}

// 设置语言偏好
function setLanguagePreference(lang) {
    // 保存到本地存储
    localStorage.setItem('preferredLanguage', lang);
    
    // 如果需要立即切换页面语言，可以在这里添加代码
    // 例如重新加载页面或动态更新文本
    console.log(`语言已设置为: ${lang}`);
    
    // 触发自定义事件，以便其他组件可以响应语言变化
    const event = new CustomEvent('languageChanged', { detail: { language: lang } });
    document.dispatchEvent(event);
}

// 加载用户偏好设置
function loadUserPreferences() {
    // 加载语言偏好
    const preferredLanguage = localStorage.getItem('preferredLanguage') || 'zh';
    
    // 更新语言选择器显示
    const languageSelector = document.querySelector('.language-selector span');
    if (languageSelector) {
        const languageOptions = document.querySelectorAll('.language-list div');
        languageOptions.forEach(option => {
            if (option.dataset.lang === preferredLanguage) {
                languageSelector.textContent = option.textContent;
            }
        });
    }
    
    // 其他用户偏好设置...
}

// 添加离线模式样式
const offlineStyles = document.createElement('style');
offlineStyles.textContent = `
    .offline-alert {
        position: fixed;
        top: 20px;
        right: 20px;
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 12px 20px;
        border-radius: 8px;
        z-index: 1000;
        transition: opacity 0.5s;
    }
    
    .offline-content {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    #close-offline-alert {
        background: none;
        border: none;
        color: white;
        font-size: 18px;
        cursor: pointer;
    }
    
    .offline-banner {
        background-color: #FEF3C7;
        border: 1px solid #F59E0B;
        border-radius: 8px;
        padding: 12px 16px;
        margin-bottom: 20px;
        color: #92400E;
    }
    
    .offline-banner a {
        color: #B45309;
        font-weight: 600;
        text-decoration: underline;
    }
    
    .disabled {
        opacity: 0.5;
        pointer-events: none;
    }
`;
document.head.appendChild(offlineStyles);

// 翻译功能API
class TranslationService {
    static async translate(text, sourceLang, targetLang) {
        try {
            // 检查是否在线
            if (!navigator.onLine) {
                // 尝试使用离线翻译
                return this.offlineTranslate(text, sourceLang, targetLang);
            }
            
            const response = await fetch('http://localhost:5000/api/translate', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    text: text,
                    source_lang: sourceLang,
                    target_lang: targetLang
                }),
            });
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            const data = await response.json();
            if (data.error) {
                throw new Error(data.error);
            }
            
            return data.translated_text;
        } catch (error) {
            console.error('翻译错误:', error);
            
            // 如果在线翻译失败，尝试离线翻译
            return this.offlineTranslate(text, sourceLang, targetLang);
        }
    }
    
    static offlineTranslate(text, sourceLang, targetLang) {
        // 检查是否有离线翻译数据
        const offlineData = localStorage.getItem('offlineTranslationData');
        if (!offlineData) {
            throw new Error('离线翻译数据不可用，请先下载语言包');
        }
        
        // 这里应该是实际的离线翻译逻辑
        // 由于实际实现需要更复杂的离线翻译引擎，这里只是一个简单的模拟
        return `[离线翻译] ${text}`;
    }
    
    static async getCultureInfo(query, location, language = 'zh') {
        try {
            // 检查是否在线
            if (!navigator.onLine) {
                // 尝试使用离线文化信息
                return this.offlineCultureInfo(query, location);
            }
            
            const response = await fetch('http://localhost:5000/api/culture', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    query: query,
                    location: location,
                    language: language
                }),
            });
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            const data = await response.json();
            if (data.error) {
                throw new Error(data.error);
            }
            
            return data.culture_info;
        } catch (error) {
            console.error('获取文化信息错误:', error);
            
            // 如果在线获取失败，尝试离线数据
            return this.offlineCultureInfo(query, location);
        }
    }
    
    static offlineCultureInfo(query, location) {
        // 检查是否有离线文化数据
        const offlineData = localStorage.getItem('offlineCultureData');
        if (!offlineData) {
            throw new Error('离线文化数据不可用，请先下载文化知识库');
        }
        
        // 这里应该是实际的离线文化信息查询逻辑
        return `[离线文化信息] 关于 ${location || query} 的信息暂不可用`;
    }
}

// 导出服务以便其他脚本使用
window.TranslationService = TranslationService;